<template>
  <BiFormItem
    v-if="!mini_app_id"
    :label="label || '小程序'"
  >
    <template slot="content">
      <el-select
        ref="select"
        v-model="result"
        placeholder="请输入小程序名称/原始ID/AppId"
        :loading="loading"
        :remote-method="remoteMethod"
        :multiple="multiple"
        collapse-tags
        remote
        clearable
        :reserve-keyword="reserve === false ? false : true"
        filterable
        @focus="mobileClear"
        @hook:mounted="mobileClear"
        @visible-change="mobileClear"
        @change="selectChange"
      >
        <el-option
          v-for="item in miniAppList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
          style="display: flex; align-items: center;justify-content: space-between;"
        >

          <span style="float: left">{{ item.name }}</span>
          <svg-icon
            v-if="item.app_type==1"
            style="float: right;"
            icon-class="miniapp"
            class="imageIcon"
          />
          <svg-icon
            v-else
            style="float: right;"
            icon-class="douyin"
            class="imageIcon"
          />
        </el-option>
      </el-select>
    </template>
  </BiFormItem>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
  props: ['multiple', 'defaultValue', 'isResize', 'notAll', 'label', 'reserve'],
  computed: {
    ...mapState('user', ['miniAppList', 'mini_app_id'])
  },
  data() {
    return {
      loading: false,
      result: ''
    }
  },
  watch: {
    isResize(newVal, oldVal) {
      console.log(newVal)
      if (newVal) {
        this.$set(this, 'result', '')
      }
    },
    defaultValue(newVal) {
      if (newVal) {
        this.result = newVal
      }
    }
  },
  mounted() {
    // 请求数据
    // if (this.miniAppList.length <= 0) {
    // }
    this.requestMiniApp({ key_word: '' })
  },
  methods: {
    ...mapActions('user', ['requestMiniApp']),
    selectChange(value) {
      this.$emit('result', value)
    },
    mobileClear(async) {
      this.$nextTick(() => {
        if (!async) {
          // ios 手机有延迟问题
          setTimeout(() => {
            const { select } = this.$refs
            const input = select.$el.querySelector('.el-input__inner')
            input.removeAttribute('readonly')
          }, 200)
        }
      })
    },
    remoteMethod(query) {
      console.log(query)
      if (query !== '') {
        this.requestMiniApp({ key_word: query })
      } else {
        this.options = []
      }
    }
  }
}
</script>

<style>
</style>